<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>批量处理菜品信息测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, button { padding: 8px; }
        button { background: #007cba; color: white; border: none; cursor: pointer; }
        button:hover { background: #005a87; }
        .result { margin-top: 20px; padding: 15px; background: #f5f5f5; }
        pre { white-space: pre-wrap; }
    </style>
</head>
<body>
    <h1>批量处理菜品信息测试</h1>
    
    <div class="form-group">
        <button id="processDishInfo">处理未处理的菜品信息</button>
    </div>
    
    <div id="result" class="result" style="display: none;">
        <h3>结果:</h3>
        <pre id="resultContent"></pre>
    </div>
    
    <script>
        document.getElementById('processDishInfo').addEventListener('click', function() {
            fetch('/api/food_ingredient/batchGetDishInfo', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('resultContent').textContent = JSON.stringify(data, null, 2);
                document.getElementById('result').style.display = 'block';
            })
            .catch(error => {
                document.getElementById('resultContent').textContent = 'Error: ' + error;
                document.getElementById('result').style.display = 'block';
            });
        });
    </script>
</body>
</html>